<template>
	<view class="content">
		<view class="search">
			<image src="https://epdb.obs.cn-east-3.myhuaweicloud.com/0/0/19d10ab9980042ea81a3e95ed917b277.png" mode=""></image>
			<u-search :showAction="false" height="35"></u-search>
		</view>
		<view class="swiper">
			<u-swiper
				:list="list1"
				@change="change"
				@click="click"
			></u-swiper>
		</view>
		<view class="cont">
			<u-sticky :customNavHeight="0" :zIndex="1000" bgColor="#ffffff">
				<view class="tabs">
					<view id="tab_item" :class="{ 'active': listActive == index}" class="tab_item"
						v-for="(item, index) in explosiveMoney" :key="index" @click="ProductNavTab(item,index)">
						<view class="txt">{{item.name}}</view>
						<view class="label">{{item.info}}</view>
					</view>
				</view>
			</u-sticky>
			<view class="mall">
				<view class="list-box">
					<view class="item" v-for="(item,index) in 10" :key="index">
						<view class="pictrue">
							<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode=""></image>
						</view>
						<view class="text-info">
							<view class="title line1">商品名称</view>
							<view class="old-price"><text>¥20</text></view>
							<view class="price">
								<text>￥</text>40
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tempArr:[],
				explosiveMoney:[
					{
						name:"促销单品",
						info:"多买多省"
					},
					{
						name:"精品推荐",
						info:"精品推荐"
					},
					{
						name:"热门榜单",
						info:"热门榜单"
					},
					{
						name:"首发新品",
						info:"首发新品"
					}
				],
				listActive: 0, // 当前选中项
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 首发新品切换
			ProductNavTab(item, index) {
				this.listActive = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color:#f5f5f5;
	}
	.list-box{
		display: flex;
		margin:10px 13px;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			width: 335rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
		
			image {
				width: 100%;
				height: 330rpx;
			}
		
			.text-info {
				padding: 10rpx 20rpx 15rpx;
		
				.title {
					color: #222222;
				}
		
				.old-price {
					margin-top: 8rpx;
					font-size: 26rpx;
					color: #AAAAAA;
					text-decoration: line-through;
		
					text {
						margin-right: 2px;
						font-size: 20rpx;
					}
				}
		
				.price {
					display: flex;
					align-items: flex-end;
					color: #ff0000;
					font-size: 34rpx;
					font-weight: 800;
		
					text {
						padding-bottom: 4rpx;
						font-size: 24rpx;
						font-weight: 800;
					}
		
					.txt {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28rpx;
						height: 28rpx;
						margin-left: 15rpx;
						margin-bottom: 10rpx;
						border: 1px solid #ff0000;
						border-radius: 4rpx;
						font-size: 22rpx;
						font-weight: normal;
					}
				}
			}
		}
	}
	.search{
		padding:10px;
		height:50px;
		background-color:#ff0000;
		display:flex;
		align-items:center;
		image{
			width: 118rpx;
			height: 62rpx;
			margin-right: 24rpx;
		}
	}
	.swiper{
		background: linear-gradient(180deg, #ff0000 0%, #ffffff 100%);
		padding:10px;
	}
	.cont{
		.tabs{
			display:flex;
			justify-content:space-between;
			padding:10px;
			.active{
				view:nth-child(1){
					color:#ff0000;
					font-size:16px;
				}
				view:nth-child(2){
					font-size:12px;
					padding:4px;
					margin-top:5px;
					border-radius:1em;
					width:60px;
					text-align:center;
					background: linear-gradient(90deg, #f62c2c 0%, #f96e29 100%);
					display:block;
					color:#ffffff;
				}
			}
			.tab_item{
				display:flex;
				position: sticky;
				top:0;
				align-items:center;
				flex-direction:column;
				view:nth-child(1){
					font-size:16px;
				}
				view:nth-child(2){
					font-size:10px;
					padding:4px;
					margin-top:5px;
				}
			}
		}
	}
</style>
